<template>
	<view class="searchPage">
		<view class="searchOne" v-if="!flag">
			<!-- 搜索输入框 -->
				<view class="search">
					<u-search placeholder="牛奶" v-model="keyword" shape="round" action-text="取消"
					border-color='#447B49' :focus='true' :show-action='true'
					height='30rpx' search-icon-color='#447B49'
					></u-search>
				</view>
				
				<!-- 历史记录 -->
				<view class="historyList">
					<view class="historyTitle">
						<view class="historyTitleLeft">历史搜索</view>
						<view class="icon iconfont icon-shanchu historyTitleIcon "></view>
					</view>
					<!-- 历史搜索列表 -->
					<view class="historyListContainer">
						<u-tag class='historyListContainerItem' text="雪月夜666" type="info" @click='showSearchtwo' />
						<u-tag class='historyListContainerItem' text="雪月夜555" type="info" />
						<u-tag class='historyListContainerItem' text="雪月夜44" type="info" />
						<u-tag class='historyListContainerItem' text="雪月夜33" type="info" />
						<u-tag class='historyListContainerItem' text="雪月夜22" type="info" />
						<u-tag class='historyListContainerItem' text="雪月夜11111" type="info" />
					</view>
				</view>
				
				<!-- 搜索发现 -->
				 <view class="searchFindList">
				 	<view class="searchFindTitle">
				 		<view class="searchFindTitleLeft">搜索发现</view>
				 		<u-icon name="reload" color="#C9CACB" size="34"></u-icon>
				 	</view>
				 	<!-- 历史搜索列表 -->
				 	<view class="searchFindListContainer">
				 		<u-tag class='searchFindListContainerItem' text="雪月夜666" type="info" />
				 		<u-tag class='searchFindListContainerItem' text="雪月夜555" type="info" />
				 		<u-tag class='searchFindListContainerItem' text="雪月夜44" type="info" />
				 		<u-tag class='searchFindListContainerItem' text="雪月夜33" type="info" />
				 		<u-tag class='searchFindListContainerItem' text="雪月夜22" type="info" />
				 		<u-tag class='searchFindListContainerItem' text="雪月夜11111" type="info" />
				 	</view>
				 </view>
			</view>
			
			<!-- 点击历史记录和搜索发现跳转的搜索页 -->
			<view class="searchTwo" v-else>
				<view class="header"> 
					<!-- 搜索输入框 -->
						<view class="search">
							<u-search placeholder="牛奶" v-model="keyword" shape="round" 
							border-color='#447B49' :focus='true' :show-action='false'
							height='30rpx' search-icon-color='#447B49'
							></u-search>
						</view>
						<view class="cartIcon">
							<u-icon name="shopping-cart" size='50rpx' ></u-icon>
						</view>
						<view class="cartNumber">7</view>
						<view class="iconBuju">
							<view class="icon iconfont icon-buju-qiehuan1 "></view>
						</view>
				</view>
					
					<!-- 综合 销量 价格 的tab切换 -->
				<view class="goodsInfo">
					<!-- tab切换 -->
					<view class="goodsTab">
						<view class="activeClass">综合</view>
						<view>销量</view>
						<view>价格</view>
					</view>
					
					<!-- goodsList  商品列表 -->
				   
					<view class="goodsList">
						<scroll-view scroll-y="true" style="height: calc(100vh - 140rpx);">
							<template>
								<view class="wrap">	
									<u-waterfall v-model="flowList" ref="uWaterfall">
										<template v-slot:left="{leftList}">
											<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
												<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
												<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
												<view class="demo-title">
													{{item.title}}
												</view>
												<view class="demo-description">
													<p>香浓醇厚</p>
													<i>|</i>
													<p>淡淡咸味</p>
													<i>|</i>
													<p>新鲜采摘</p>
												</view>
												<view class="demo-shopPrice">
													<text class="demo-iconPrice">￥</text>
													<text class="demo-price">11.80</text>
												</view>
												<view class="demo-shopVipPrice">
													<text class="demo-VipIconPrice">￥</text>
													<text class="demo-VipPrice">11.70</text>
													<u-icon name="level" color="#447B49" size="20" label='绿卡价' label-size='20' margin-left='1rpx' label-color='#447B49'></u-icon>
													<!-- <text class="greenCardPrice">绿卡价</text> -->
													<view class="demo-shopping-cart">
														<u-icon name="shopping-cart" color='#EDFFE5' size='30rpx' top='0' left='10'></u-icon>
													</view>	
												</view>
												
											</view>
										</template>
										<template v-slot:right="{rightList}">
											<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
												<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
												<view class="demo-title">
													{{item.title}}
												</view>
												<view class="demo-description">
													<p>香浓醇厚</p>
													<i>|</i>
													<p>淡淡咸味</p>
													<i>|</i>
													<p>新鲜采摘</p>
												</view>
												<view class="demo-shopPrice">
													<text class="demo-iconPrice">￥</text>
													<text class="demo-price">11.80</text>
												</view>
												<view class="demo-shopVipPrice">
													<text class="demo-VipIconPrice">￥</text>
													<text class="demo-VipPrice">11.70</text>
													<u-icon name="level" color="#447B49" size="20" label='绿卡价' label-size='20' margin-left='1rpx' label-color='#447B49'></u-icon>
													<!-- <text class="greenCardPrice">绿卡价</text> -->
													<view class="demo-shopping-cart">
														<u-icon name="shopping-cart" color='#EDFFE5' size='30rpx' top='0' left='10'></u-icon>
													</view>	
												</view>
											</view>
										</template>
									</u-waterfall>
									<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
								</view>
							</template>
							
						</scroll-view>
						<!-- 回到顶部 -->
						<!-- <view class="wrap">
								<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
							</view> -->
						
					</view>
				   	
				</view>	
			</view>
		</view>
	

</template>

				
<script>
	export default {
			data() {
				return {
					scrollTop: 0,
					keyword: '',
					flag:false	,
					loadStatus: 'loadmore',
					flowList: [],
					list: [
						{
							price: 35,
							title: '三红胡萝卜 约500g',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
						},
						{
							price: 75,
							title: '有机胡萝卜 250g/袋',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
						},
						{
							price: 385,
							title: '透心胡萝卜 400g/份',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						},
						{
							price: 784,
							title: '【一顿吃光】家常蔬菜组合 400g/份',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
						},
						{
							price: 7891,
							title: '吮吸甜心水果萝卜1袋136g',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
						},
						{
							price: 2341,
						    shop: '李白杜甫白居易旗舰店',
							title: '崇明白萝卜 800g/份',
							image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
						},
						{
							price: 661,
							shop: '李白杜甫白居易旗舰店',
							title: '水果萝卜 约600g',
							image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
						},
						{
							price: 1654,
							title: '水果萝卜 约850g',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						},
						{
							price: 1678,
							title: '樱桃小萝卜 300g',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						},
						{
							price: 924,
							title: '乌江脆口萝卜 150g/袋',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						},
						{
							price: 8243,
							title: '三和四美萝卜丝包300g/袋',
							shop: '李白杜甫白居易旗舰店',
							image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
						},
					]
				}
			},
			// 返回顶部，监听滚动条的位置
			onPageScroll(e) {
					this.scrollTop = e.scrollTop;
				},
			onLoad() {
				this.addRandomData();
			},
			onReachBottom() {
				this.loadStatus = 'loading';
				// 模拟数据加载
				setTimeout(() => {
					this.addRandomData();
					this.loadStatus = 'loadmore';
				}, 1000)
			},
			methods: {
				showSearchtwo(){
					this.flag=true 
				},
				addRandomData() {
					for(let i = 0; i < 10; i++) {
						let index = this.$u.random(0, this.list.length - 1);
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = JSON.parse(JSON.stringify(this.list[index]))
						item.id = this.$u.guid();
						this.flowList.push(item);
					}
					// this.flag=false
				}
			}
		}
</script>

<style lang="scss">
.searchPage{
	.searchOne{
		height: 100%;
		margin-top: 10rpx;
		padding: 0 12rpx;
		.search{
			width: 730rpx;
			margin-bottom: 40rpx;
		}
		// 历史搜索
		.historyList{
			.historyTitle{
				width: 100%;
				display: flex;
				justify-content: space-between  ;
				.historyTitleLeft{
					 
				}
				.historyTitleIcon{
					color: #C9CACB;
				}
			}
			.historyListContainer{
				display:flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.historyListContainerItem{
					margin-right: 10rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		// 搜索发现
		.searchFindList{
			margin-top: 50rpx;
			.searchFindTitle{
				width: 100%;
				display: flex;
				justify-content: space-between  ;
				.searchFindTitleLeft{	 
				}
			}
			.searchFindListContainer{
				display:flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.searchFindListContainerItem{
					margin-right: 10rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.searchTwo{
		height: 100%;
		.header{
			height: 100%;
			margin-top: 10rpx;
			padding: 0 12rpx;
			display: flex;
			position: relative;
			// position: fixed;
			.search{
				width: 600rpx;
				margin-bottom: 40rpx;
			}
			.cartIcon{
				margin-left:20rpx;
			}
			.cartNumber{
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 20rpx;
				color: white;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				top: 0;
				right: 60rpx;
			}
			.iconBuju{
				height: 40rpx;
				width: 40rpx;
				line-height: 30rpx;
				margin-left: 20rpx;
				padding-top: 10rpx;
			}
		}
	    .goodsInfo{
			.goodsTab{
				display: flex;
				justify-content: space-around;
				color: #232425;
				margin-bottom: 20rpx;
				// position: fixed;
				.activeClass{
					color: #5AA46A;
				}
			}
			.goodsList{
				width: 100%;
				height: auto;
				background-color: #F0F1F2;
				// .wrap{
				// 	height: (200vh-160rpx);
				// } 
				.demo-warter {
						border-radius: 8px;
						margin: 5px;
						background-color: #ffffff;
						padding: 8px;
						position: relative;
						image{
							// height: 100rpx;
							// width: 100%;
						}
					}		
					.demo-image {
						width: 100%;
						border-radius: 4px;
					}
					
					.demo-title {
						font-size: 26rpx;
						margin-top: 5px;
						color: $u-main-color;
					}
					.demo-description{
						margin-top: 8rpx;
						display: flex;
						font-size: 20rpx;
						color: #AEAfB0;
						i{
							margin: 0 6rpx;
						}
					}
					.demo-shopPrice{
						margin-top: 10rpx;
						height: 28rpx;
					  .demo-iconPrice{
						  font-size: 24rpx;
						  color: #FB686A;
					  }	
					  .demo-price{
						   color: #FB686A;
						   font-size: 28rpx;
					  }
					}
					.demo-shopVipPrice{
						// display: flex;
						position: relative;
						height: 24rpx;
						.demo-VipIconPrice{
							font-size: 24rpx;
							color: #447B49;							  
						}	
						.demo-VipPrice{
							font-size:24rpx ;
							color: #447B49;
							margin-right: 10rpx;
						}
						.demo-shopping-cart{
							display: inline-block;
							height: 40rpx;
							width: 40rpx;
							background-color: #5BBE69;
							border-radius: 50%;
							text-align: center;
							line-height: 40rpx;
							position: absolute;
							bottom: -5rpx;
							right: 5rpx;
						}
					}				
			}
		}
	}
	
}
</style>
